<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import 'echarts-wordcloud'
import { computed, ref, watchEffect } from 'vue'
import { spaceCategoryAnalyzeUsingPost, spaceTagAnalyzeUsingPost } from '@/api/analyzeController.ts'
import { message } from 'ant-design-vue'

interface Props {
  //空间 ID
  spaceId: string
  //是否查询公共图库
  queryPublic: boolean
  //全空间分析
  queryAll: boolean
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

//存储响应结果
const spaceTagAnalyzeResponse = ref<API.SpaceTagAnalyzeResponse[]>([])

async function spaceTagAnalyze() {
  const resp = await spaceTagAnalyzeUsingPost({
    spaceId: props?.spaceId,
    queryPublic: props?.queryPublic,
    queryAll: props?.queryAll,
  })
  if (resp.data.code === 0 && resp.data.data) {
    spaceTagAnalyzeResponse.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
}

const options = computed(() => {
  return {
    series: [
      {
        type: 'wordCloud',
        // 词云的形状，也可以是自定义的图片等，这里用默认的圆形相关（也可尝试 'circle'、'cardioid' 等）
        shape: 'ellipse',
        // 词云布局相关，旋转范围等
        rotationRange: [-45, 45],
        rotationStep: 15,
        // 字体大小范围
        sizeRange: [12, 60],
        // 字体样式
        textStyle: {
          fontFamily: 'sans-serif',
          color: function () {
            // 随机颜色，也可根据需求设置固定几种颜色循环
            return ['#800080', '#4169E1', '#00BFFF', '#228B22', '#FFA500', '#FF6347'][
              Math.floor(Math.random() * 6)
            ]
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333',
          },
        },
        // 数据，格式为 [{name: '标签', value: 权重}, ...]
        data: spaceTagAnalyzeResponse.value.map((item) => ({
          name: item.tag,
          value: item.count,
        })),
      },
    ],
  }
})

watchEffect(() => {
  spaceTagAnalyze()
})
</script>

<template>
  <!--  空间图片标签分析,词云图-->
  <div id="spaceTagAnalyze">
    <a-card style="height: 320px" title="空间图片标签分析">
      <v-chart :option="options" style="height: 300px" />
    </a-card>
  </div>
</template>

<style scoped></style>
